<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="12">
        <Shiki :code="mdArr[1]" lang="vue" />
        <el-card shadow="never" class="marginTop">
          <el-tooltip
            v-for="item in routerMethods"
            :key="item.label"
            :content="item.tooltip"
          >
            <el-button @click="copy('router.' + item.label)" plain>{{ item.label }}</el-button>
          </el-tooltip>
        </el-card>
        <JsonPretty :data="JSON.stringify($router.resolve($route.fullPath))" :deep="1" class="marginTop" />
      </el-col>
      <el-col :span="12">
        <Shiki :code="mdArr[13]" lang="js" />
        <Shiki :code="mdArr[11]" lang="js" class="marginTop" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="router">
import JsonPretty from '@/components/json/Pretty.vue'
import { ref } from 'vue'
import { copy } from '@/utils/index'

import md from './index.md?raw'
const mdArr = md.split('```\n')

const routerMethods = ref([{
  label: 'push(to)',
  tooltip: '程序式地通过将一条记录加入到历史栈中来导航到一个新的 URL。',
}, {
  label: 'replace(to)',
  tooltip: '程序式地通过替换历史栈中的当前记录来导航到一个新的 URL。',
}, {
  label: 'go(delta)',
  tooltip: '允许你在历史中前进或后退。',
}, {
  label: 'getRoutes()',
  tooltip: '获得所有路由记录的完整列表。',
}, {
  label: 'hasRoute(name)',
  tooltip: '检查一个给定名称的路由是否存在。',
}, {
  label: 'resolve(to, currentLocation?)',
  tooltip: '解析路由',
}, {
  label: 'addRoute(parentName?, route)',
  tooltip: '添加一个新的路由记录到该路由器中。',
}, {
  label: 'removeRoute(name)',
  tooltip: '根据其名称移除一个现有的路由。',
}, {
  label: 'beforeEach(guard)',
  tooltip: '添加一个导航钩子，它会在每次导航之前被执行。返回一个用来移除该钩子的函数。',
}, {
  label: 'afterEach(guard)',
  tooltip: '添加一个导航钩子，它会在每次导航之后被执行。返回一个用来移除该钩子的函数。',
}, {
  label: 'beforeResolve(guard)',
  tooltip: '添加一个导航守卫，它会在导航将要被解析之前被执行。此时所有组件都已经获取完毕，且其它导航守卫也都已经完成调用。返回一个用来移除该守卫的函数。',
}, {
  label: 'isReady()',
  tooltip: '返回一个 Promise，它会在路由器完成初始导航之后被解析，也就是说这时所有和初始路由有关联的异步入口钩子和异步组件都已经被解析。如果初始导航已经发生，则该 Promise 会被立刻解析。这在服务端渲染中确认服务端和客户端输出一致的时候非常有用。注意在服务端你需要手动加入初始地址，而在客户端，路由器会从 URL 中自动获取。',
}, {
  label: 'onError(handler)',
  tooltip: '添加一个错误处理器，它会在每次导航遇到未被捕获的错误出现时被调用。其中包括同步和异步被抛出的错误、在任何导航守卫中返回或传入 next 的错误、尝试解析一个需要渲染路由的异步组件时发生的错误。',
}])
</script>
<style scoped>
.el-card__body {
  padding-bottom: 8px;
}
.el-button {
  margin-bottom: 12px;
  margin-left: 0;
  margin-right: 12px;
}

.el-button:last-child {
  margin-right: 0;
}
</style>
